<template>
    <div class="self-integral-records">
        <div class="records-container">
            <van-tabs v-model="active" color="#787ac3" :swipe-threshold="3">
                <van-tab :title="item.title" v-for="item , key in recordsTabsData" :key="key">
                    <!--integralRecordsCom  integralRecords[mapName]-->
                    <div class="tab-wrapper"
                         v-show="loadingStatus&&integralRecordsCom.length>0"
                         v-for="record , index in integralRecordsCom"
                         :key="index">
                        <div class="content-block">
                            <van-row>
                                <van-col span="4">
                                    <div class="img-wrapper">
                                        <img :src="record.photo" @click="lookPhoto(record.photo)">
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <span class="create-date" v-show="active==0">{{record.createDate}}</span>
                                    <div v-show="active==1">
                                        <span>消费{{record.cost}}元 {{record.integral}}积分</span>
                                    </div>
                                    <span v-show="active==2">{{record.remark}}</span>
                                </van-col>
                                <van-col span="8">
                                    <van-button v-show="active==0" round type="primary" size="small"  class="btnColor" @click="del(record.id)">
                                            {{record.btnText}}
                                    </van-button>
                                    <span v-show="active==1||active==2">{{record.handelDate}}</span>
                                </van-col>
                            </van-row>
                        </div>
                    </div>
                    <div class="tab-wrapper" v-show="loadingStatus&&!integralRecordsCom.length>0">
                        <div class="content-block">
                            暂无数据
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
    const RECORDS_NAMES = ['ready', 'success', 'fail']
    import Vue from 'vue'
    import Cookies from 'js-cookie'
    import {Toast, Dialog, ImagePreview} from 'vant'

    Vue.use(Dialog);
    Vue.use(Toast);
    export default {
        name: "SelfintegralRecords",
        data() {
            return {
                token: '',
                active: 0,
                loadingStatus: false,
                recordsTabsData: [
                    {title: '待审核'},
                    {title: '已通过'},
                    {title: '未通过'}
                ],
                integralRecords: {
                    ready: [],
                    success: [],
                    fail: []
                }
            }
        },
        created() {
            this.token = Cookies.get('token');
            this.fetchSelfIntegralList();
        },
        computed: {
            mapName() {
                return RECORDS_NAMES[this.active]
            },
            integralRecordsCom() {
                let list = this.integralRecords[this.mapName];
                console.log("list", list)
                if (list.length <= 0) return [];
                if (this.active == 0) {
                    return list.map(item => {
                        item.btnText = '撤销'
                        return item
                    })
                } else if (this.active == 1) {
                    return list.map(item => {
                        return item
                    })
                } else if (this.active == 2) {
                    return list.map(item => {
                        return item
                    })
                } else {
                    return []
                }


            }
        },
        methods: {
            fetchSelfIntegralList() {
                this.loadingStatus = false;
                this.$api.integral.selfIntegralList({openId: this.token}).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.loadingStatus = true
                        this.integralRecords.ready = res.ready
                        this.integralRecords.success = res.success
                        this.integralRecords.fail = res.fail

                    } else {
                        console.log("暂无数据")
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            del(id) {
                this.$api.integral.del({id: id}).then(res => {
                    if (res.code == 0) {
                        this.fetchSelfIntegralList()
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            lookPhoto(imgUrl) {
                let instance = ImagePreview({
                    images: [imgUrl],
                    startPosition: 0,
                    showIndex: false,
                    onClose() {
                        instance = null
                    }
                })
            }
        }
    }
</script>

<style lang="less">
    @import "../../assets/less/base";
    .self-integral-records {
        min-height: 100%;
        background-color: rgb(241, 245, 248);
        .records-container {
            .tab-wrapper {
                .content-block {
                    background-color: #ffffff;
                    margin: 10px;
                    padding: 10px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    .img-wrapper{
                        width: 50px;
                        height: 50px;
                        overflow: hidden;
                        img{
                            width: 100%;
                        }
                    }
                    .create-date{
                        display: inline-block;
                        height: 50px;
                        line-height: 50px;
                    }
                    .btnColor {
                        margin-left: 20px;
                        border: 1px solid @main-theme-color;
                        background: @main-theme-color;
                    }
                }
            }
        }
    }
</style>
